Skip to content

Runs viewer: live session player with URL bar, trace rail, self-hosted trace viewer#980

Merged
RhysSullivan merged 2 commits into
mainfrom
claude/e2e-session-player
Jun 12, 2026
Merged

Runs viewer: live session player with URL bar, trace rail, self-hosted trace viewer#980
RhysSullivan merged 2 commits into
mainfrom
claude/e2e-session-player

Conversation

@RhysSullivan

@RhysSullivan RhysSullivan commented Jun 12, 2026

Copy link
Copy Markdown
Collaborator

The runs viewer plays a session live instead of (only) the baked film.mp4.

  • SessionPlayer: one playback head drives both real recordings (asciinema cast + browser video); the focus timeline decides which window is on screen; the stage is a fixed 16:10 box so the player never resizes at a cut.
  • Synthetic window chrome: a terminal title bar, or a browser URL bar showing the live address (main-frame navigations are captured into timeline.json by the browser surface) with a deep link into the Playwright trace.
  • Trace rail: the run's distributed traces sit beside the stage with per-request duration bars scaled to the slowest request (amber ≥1s, red on 4xx/5xx), tagged by source window (⌨ terminal / ⊕ browser). Rows seek the player, the row at the playhead highlights and auto-scrolls, trace ids open motel's waterfall.
  • Self-hosted Playwright trace viewer: copied out of playwright-core into runs/trace-viewer at viewer build; trace links go there same-origin. trace.playwright.dev is HTTPS and browsers block its fetch of trace.zip from a plain-HTTP server (the tailscale-IP case) as mixed content.
  • Tabs split the lenses: session / browser / terminal / test source. film.mp4 remains the fallback and the PR-media artifact.

Terminal act:

session-player-terminal-act.png

Browser act — URL bar + Playwright deep link; highlighted row is the request at the playhead:

session-player-browser-act.png

Stack

  1. Developer-session e2e: chat-theater recordings, focus timeline, one-mp4 films #962
  2. E2e distributed tracing: suite-owned motel, browser OTLP, end-to-end trace join #979
  3. Runs viewer: live session player with URL bar, trace rail, self-hosted trace viewer #980 👈 current
  4. Production browser span export: same-origin OTLP forwarded to Axiom #981

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jun 12, 2026

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
❌ Deployment failed
View logs
executor-marketing e49bdd1 Jun 12 2026, 05:48 PM

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jun 12, 2026

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
❌ Deployment failed
View logs
executor-cloud e49bdd1 Jun 12 2026, 05:48 PM

The run page's session tab now performs the cuts the film bakes into
pixels: one playback head drives both real recordings (asciinema cast +
browser video), the focus timeline decides which window is on screen,
and a synthetic window chrome floats above the stage — a terminal title
bar, or a browser URL bar fed by the timeline's new nav track (main-
frame navigations captured by the browser surface) with a deep link
into the Playwright trace.

The scrubber shows the acts (terminal/browser segments) and a tick per
distributed trace; the trace table is timeline-aligned — click a row's
timestamp to jump the player there, the row highlights as playback
passes it, and the trace id still opens motel's waterfall. Tabs split
the lenses: session / browser / terminal / source. film.mp4 remains the
fallback (and the PR-media artifact) for runs without an anchored
timeline.
trace.playwright.dev is HTTPS, so when the runs viewer is reached over
plain HTTP (tailscale IP) the browser blocks its fetch of trace.zip as
mixed content and the trace never loads. playwright-core ships the
trace viewer as a static PWA — rebuild-viewer.ts now copies it to
runs/trace-viewer and the run page links there same-origin, which also
keeps traces viewable offline.
@RhysSullivan RhysSullivan force-pushed the claude/e2e-session-player branch from 8a221c7 to e49bdd1 Compare June 12, 2026 17:48
@RhysSullivan RhysSullivan changed the base branch from claude/e2e-distributed-tracing to main June 12, 2026 17:48
@RhysSullivan RhysSullivan marked this pull request as ready for review June 12, 2026 17:48
@RhysSullivan RhysSullivan merged commit bf23a23 into main Jun 12, 2026
1 of 10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant